<template>
  <div>
    <nut-table
      :columns="columns3"
      :data="data2"
      :striped="striped"
      style="overflow-x: auto"
    ></nut-table>
  </div>

  <van-sticky :offset-bottom="0" position="bottom">
    <van-row gutter="20">
      <van-col span="12">
        <van-button type="primary" size="large" @click="listdata(dataform)"
          >实时数据</van-button
        >
      </van-col>
      <van-col span="12">
        <van-button type="primary" size="large">静态数据</van-button>
      </van-col>
    </van-row>
  </van-sticky>
</template>

<script scope>
import { reactive, toRefs } from "vue";
import { list } from '@/api/datelist/datelist'
// import { response } from "express";
export default {
  methods: {
        listdata(form) {
          list(form)
        }
      },
  props: {},
  setup() {
    const state = reactive({
      striped: true,
      dataform: {
        labCode: '1',
        testDateTime: '0',
        testunitno: '2',
        startdate: '3',
        enddate: '4',
        start: '5',
        length: '6',
        draw: '7',
        testNow: '8'
      },
      columns3: [
        {
            title: "日期",
            key: "date",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "时间",
            key: "time",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "温度1",
            key: "tem1",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "温度2",
            key: "tem2",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "温度3",
            key: "tem3",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "温度4",
            key: "tem4",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "温度5",
            key: "tem5",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "电压",
            key: "v",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "电流",
            key: "a",
            stylehead: {
              width: '100px',
            }
        },
        {
            title: "功率",
            key: "w",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "耗电量",
            key: "index",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "频率",
            key: "index",
            stylehead: {
              width: "100px",
            }
        },
        {
            title: "功率因数",
            key: "index",
            stylehead: {
              width: "100px",
            }
        },
      ],
      data2: [

      ],
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scope>
.nut-table {
  display: block;
  overflow: auto;
  max-height: calc(100vh - 220px);
  margin-bottom: 50px;
}

.nut-table__main {
  // display: block;
  table-layout: fixed;
  border: 1px solid #ccc;
  padding: 5px;
  width: 500px;
  height: 500px;
}
.nut-table__main__head {
  display: table-header-group;
  border-bottom: 1px solid #ccc;
}
.nut-table__main__body__tr {
  border-bottom: 1px solid #ccc;
}
.nut-table__main__body__tr__td {
  text-align: center;
}
// 固定首列
// .nut-table__main__head__tr__th:first-child,
// .nut-table__main__body__tr__td:first-child{
//     // width:60px;
//     position:sticky;
//     left:0;
//     z-index:3;
//     background-color: #ffffff;
//     border-bottom: 1px solid #ccc;
//     padding-left: 5px;
// }
// .nut-table__main__head__tr__th:nth-child(2),
// .nut-table__main__body__tr__td:nth-child(2){
//     position:sticky;
//     left:71px;
//     z-index:1;
//     background-color: #ffffff;
// }
// 固定首行
.nut-table__main__head__tr__th {
  position: sticky;
  top: 0;
  background: #dae3f3;
  text-align: center;
}
.nut-table__main__head__tr__th:first-child,
.nut-table__main__head__tr__th:nth-child(2) {
  background: #dae3f3;
  z-index: 2;
}

// 合并单元格
// /deep/.nut-table__main__body__tr__td:first-child {
//     display: none;
// }
// /deep/.nut-table__main__body__tr:first-child .nut-table__main__body__tr__td:first-child{
//     display: block;
// }
</style>
